<template>
  <div class="container">
    <div class="title">服务器信息</div>
    <div class="selectBox">
      <span class="InputLable">当前服务器IP</span>
      <el-select v-model=" CurrentServe.ip" class="select" placeholder="请选择" @change="selectChange">
        <el-option
          v-for="item in serveList"
          :key="item.ip"
          class="select"
          :label="item.ip"
          :value="item.ip"
        />
      </el-select>
    </div>
    <span class="chartBox">
      <div class="chartItem">
        <span class="liquidTitle">CPU</span>
        <div class="chart">
          <liquidFill ref="liqiud1" :v-if="chartValueList[0]" class="liqiud" :value="chartValueList[0]" />
        </div>
        <div class="infoBox">
          使用率：{{ CurrentServe.cpuStatus['当前值'] }}<br>
          参数：{{ CurrentServe.cpuStatus['info'] }}
        </div>
      </div>
      <div class="chartItem">
        <div class="liquidTitle">内存</div>
        <div class="chart">
          <liquidFill ref="liqiud2" class="liqiud" :value="chartValueList[1]" />
        </div>
        <div class="infoBox">
          使用率：{{ CurrentServe.memoryStatus['当前值'] }}<br>
          参数：{{ CurrentServe.memoryStatus['info'] }}
        </div>
      </div>
      <div class="chartItem">
        <div class="liquidTitle">硬盘</div>
        <div class="chart">
          <liquidFill ref="liqiud3" class="liqiud" :value="chartValueList[2]" />
        </div>
        <div class="infoBox">
          使用率：{{ CurrentServe.diskStatus['当前值'] }}<br>
          参数：{{ CurrentServe.diskStatus['info'] }}
        </div>
      </div>

    </span>

  </div>
</template>
<script>
import liquidFill from './liquidFill.vue'
import { getMethinelnfoAPI } from '@/api/dashBoardAPI.js'
export default {
  name: 'ServeStaticChart',
  components: {
    liquidFill
  },
  data() {
    return {
      CurrentServe: {
        ip: '',
        cpuStatus: {
          status: '',
          info: ''
        },
        memoryStatus: {
          status: '',
          info: ''
        },
        diskStatus: {
          status: '',
          info: ''
        }
      },
      serveList: [],
      chartValueList: [],
      numbervalue: []
    }
  },
  created() {
    this.getStatistics()
  },
  mounted() {
    // this.initChart()
  },
  methods: {
    /**
     * 获取服务器数据函数
     */
    getStatistics() {
      getMethinelnfoAPI().then(res => {
        this.serveList = res.MethineInfovo
        const temp = this.serveList[0]
        this.CurrentServe.ip = temp.ip
        this.valueChange(temp)
      })
    },
    /**
     * 处理选中函数
     * @param {*} val
     */
    selectChange(val) {
      const temp = this.serveList.find(item => item.ip === val)
      this.valueChange(temp)
    },
    /**
     * 数据更新函数
     * @param {*} temp 选中ip所在集合对象
     */
    valueChange(temp) {
      this.chartValueList = []
      const data = [this.CurrentServe.cpuStatus, this.CurrentServe.memoryStatus, this.CurrentServe.diskStatus] = temp.children
      data.map(item => {
        this.chartValueList.push(parseInt(item['当前值'].slice(0, 2)))
      })
    }

  }
}

</script>
<style scoped>
::v-deep .select{
  display: relative;
  left:85px
}
.title{
  font-size: 20px;
  color: #fbffff;
  font-weight: bold;
  margin-left: 20px;
}
.liqiud{
display: inline-block;
width: 150px;
height: 150px;
}
.chartBox{
  display: flex;
  width:400px;
  margin-top: 30px;
}
.chart,.infoBox{
  display: inline-block;

}
.chartItem{
  /* display: flex; */
  height: 100px;
}
.infoBox{
  position: relative;
  top: -30px;
  left: 30px;
  color:#93ade5;
  font-weight: bold;
}
.selectBox{
position: relative;
top:20px;
left: 20px;
.InputLable{
    color: white;
    font-size: 18px;
  }
}
.liquidTitle{
 position: relative;
  top:20px;
  left:53px;
  width:fit-content;
  text-align: center;
  color:#93ade5;
  font-weight: bold;
}
</style>
<style>
.selectBox{
  .el-input__inner{
    background-color: #021439;
    /* opacity: 0.5; */
    color: white;
  }
}
</style>
